<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit"/>
    <meta name="force-rendering" content="webkit"/>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>
    <title>机型分布</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">

    <link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="/bower_components/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="/bower_components/Ionicons/css/ionicons.min.css">
    <link rel="stylesheet" href="/bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css">
    <link rel="stylesheet" href="/dist/css/AdminLTE.min.css">
    <link rel="stylesheet" href="/dist/css/skins/_all-skins.min.css">

    <link rel="stylesheet" href="/dist/js/datepicker/css/datepicker.css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    <!-- Google Font -->
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">

    <!--头部-->
    <header id="headerDiv" class="main-header">
        <!--#include  file="/pages/admin/header.html"-->
    </header>

    <!--左侧边栏 -->
    <aside id="sidebarDiv" class="main-sidebar">
        <!--#include  file="/pages/admin/sidebar.html"-->
    </aside>

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <h1>
                <small>机型分布</small>
            </h1>
            <ol class="breadcrumb">
                <li><a href="javascript:void(0);"><i class="fa fa-dashboard"></i> 游戏指标</a></li>
                <li><a href="javascript:void(0);">机型分布</a></li>
            </ol>
        </section>



        <!-- Main content -->
        <section class="content">
            <div class="row">
                <div class="col-xs-12">
                    <div class="box">
                        <div class="box-header">


                            <form role="form" class="form-inline pull-right">
                                <label class="control-label">搜索:</label>

                                <div class="form-group">
                                    <div class="c-datepicker-date-editor J-datepicker-range-day mt10">
                                        <i class="c-datepicker-range__icon kxiconfont icon-clock"></i>
                                        <input id="startDate" placeholder="开始日期" name="" class="c-datepicker-data-input only-date" value="">
                                        <span class="c-datepicker-range-separator">~</span>
                                        <input id="endDate" placeholder="结束日期" name="" class="c-datepicker-data-input only-date" value="">
                                    </div>
                                </div>

                                <div class="input-group input-group-sm">
                                    <div class="input-group-btn">
                                        <button type="button" class="btn btn-default">游戏</button>
                                    </div>
                                    <!-- /btn-group -->
                                    <input type="text" id="game" class="form-control">
                                </div>
                                <!--<div class="input-group input-group-sm">
                                  <div class="input-group-btn">
                                    <button type="button" class="btn btn-default">渠道id</button>
                                  </div>
                                  <input id="uid" type="text" class="form-control">
                                </div>-->
                                <div class="input-group input-group-sm">
                                    <div class="input-group-btn">
                                        <button type="button" class="btn btn-default">联运子渠道id</button>
                                    </div>
                                    <!-- /btn-group -->
                                    <input id="lyid" type="text" class="form-control">
                                </div>


                                <div class="form-group">
                                    <button type="button" class="btn btn-sm btn-primary " onclick="search();"><i class="fa fa-search"></i></button>
                                </div>
                            </form>
                        </div>

                        <div class="col-xs-6">
                            <div id="chart1" style="min-height: 800px"></div>
                        </div>
                        <div class="col-xs-6">
                            <div id="chart2" style="min-height: 800px"></div>
                        </div>
                        <!-- /.box-body -->
                    </div>
                    <!-- /.box -->
                </div>
            </div>
        </section>
        <!-- /.content -->
    </div>
    <!-- Control Sidebar -->
    <!-- /.control-sidebar -->
    <!-- Add the sidebar's background. This div must be placed
         immediately after the control sidebar -->
    <div class="control-sidebar-bg"></div>
</div>
<!-- ./wrapper -->
<script src="/bower_components/jquery/dist/jquery.min.js"></script>
<script src="/bower_components/morris.js/morris.min.js"></script>
<script src="/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="/bower_components/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
<script src="/bower_components/jquery-slimscroll/jquery.slimscroll.min.js"></script>
<script src="/bower_components/fastclick/lib/fastclick.js"></script>
<script src="/dist/js/adminlte.min.js"></script>
<script src="/dist/js/store.min.js"></script>
<script src="/dist/js/layer/layer.js"></script>
<script src="/dist/js/laydate/laydate.js"></script>

<script src="/dist/js/datepicker/js/plugins/moment.min.js"></script>
<script src="/dist/js/datepicker/js/datepicker.all.js"></script>
<script src="/dist/js/echarts.min.js"></script>

<script>
    var dataMap={};
    var datatable;
    var timeType='day';
    $(function () {
        initChart1();
        initChart2();
        var DATAPICKERAPI = {

            shortcutMonth: function () {
                // 当月
                var nowDay = moment().get('date');
                var prevMonthFirstDay = moment().subtract(1, 'months').set({ 'date': 1 });
                var prevMonthDay = moment().diff(prevMonthFirstDay, 'days');
                return {
                    now: '-' + nowDay + ',0',
                    prev: '-' + prevMonthDay + ',-' + nowDay
                }
            },

            // 快捷选项option
            rangeShortcutOption1: [
                {
                    name: '今天',
                    day: '0,0'
                },
                {
                    name: '昨天',
                    day: '-1,-1'
                },
                {
                    name: '近7天',
                    day: '-8,-1'
                }, {
                    name: '最近30天',
                    day: '-31,-1'
                }]

        };
        //年月日范围
        $('.J-datepicker-range-day').datePicker({
            hasShortcut: true,
            format: 'YYYY-MM-DD',
            isRange: true,
            shortcutOptions: DATAPICKERAPI.rangeShortcutOption1
        });
    });


    function search() {
        initChart1();
        initChart2();
    }

    //折线图
    function initChart1() {
        let startDate=$("#startDate").val();
        let endDate=$("#endDate").val();
        let game = $("#game").val();
        let uid = $("#uid").val();
        let lyid = $("#lyid").val();
        let chart1 = echarts.init(document.getElementById('chart1'),'light');
        chart1.showLoading({color:'#409eff'});
        let values=[];
        //后台请求 数据
        let url="/lmgame/gamedata/modelDist";
        $.ajax({
            type : 'POST',
            data:{'startDate':startDate,'endDate':endDate,'game':game,'uid':uid,'lyid':lyid,'type':1},
            url : url,
            dataType : "json",
            success : function(data) {
                if (data.code == '0') {
                    nums=[];
                    model=[];
                    $.each(data.data, function(k, v) {       //遍历返回的JSON数据
                        values.push({
                            name : v.mobile_brand,
                            value : v.count
                        });
                    });
                    chart1.hideLoading(); //隐藏加载动画
                    let option = {
                        title : {
                            text: '注册机型分布',
                            textStyle: {
                                fontWeight: 'normal',
                                color: '#666'          // 主标题文字颜色
                            },
                            left: 'center'
                        },
                        tooltip : {
                            trigger: 'item',
                            formatter: "{a} <br/>{b} : {c} ({d}%)"
                        },
                        series : [
                            {
                                name: '注册机型分布',
                                type: 'pie',
                                radius : '55%',
                                center: ['60%', '50%'],
                                data: values,
                                itemStyle: {
                                    emphasis: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                    };
                    chart1.setOption(option);
                }else{
                    //layer.msg("数据返回失败!");
                    chart1.hideLoading();
                }
            },
            error : function(errorMsg) {
                //请求失败时执行该函数
                chart1.hideLoading();
            }
        });
    }

    function initChart2() {
        let startDate=$("#startDate").val();
        let endDate=$("#endDate").val();
        let game = $("#game").val();
        let uid = $("#uid").val();
        let lyid = $("#lyid").val();
        let chart1 = echarts.init(document.getElementById('chart2'),'light');
        chart1.showLoading({color:'#409eff'});
        let values=[];
        //后台请求 数据
        let url="/lmgame/gamedata/modelDist";
        $.ajax({
            type : 'POST',
            data:{'startDate':startDate,'endDate':endDate,'game':game,'uid':uid,'lyid':lyid,'type':3},
            url : url,
            dataType : "json",
            success : function(data) {
                if (data.code == '0') {
                    nums=[];
                    model=[];
                    $.each(data.data, function(k, v) {       //遍历返回的JSON数据
                        values.push({
                            name : v.mobile_brand,
                            value : v.count
                        });
                    });
                    chart1.hideLoading(); //隐藏加载动画
                    let option = {
                        title : {
                            text: '充值机型分布',
                            textStyle: {
                                fontWeight: 'normal',
                                color: '#666'          // 主标题文字颜色
                            },
                            left: 'center'
                        },
                        tooltip : {
                            trigger: 'item',
                            formatter: "{a} <br/>{b} : {c} ({d}%)"
                        },
                        series : [
                            {
                                name: '充值机型分布',
                                type: 'pie',
                                radius : '55%',
                                center: ['60%', '50%'],
                                data: values,
                                itemStyle: {
                                    emphasis: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                    };
                    chart1.setOption(option);
                }else{
                    //layer.msg("数据返回失败!");
                    chart1.hideLoading();
                }
            },
            error : function(errorMsg) {
                //请求失败时执行该函数
                chart1.hideLoading();
            }
        });
    }




    //获取当前时间，格式YYYY-MM-DD
    function getNowFormatDate() {
        var date = new Date();
        var seperator1 = "-";
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var strDate = date.getDate();
        if (month >= 1 && month <= 9) {
            month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
            strDate = "0" + strDate;
        }
        var currentdate = year + seperator1 + month + seperator1 + strDate;
        return currentdate;
    }

</script>

</body>
</html>
